Lelande

About

Lelande

HTML5 Portfolio Template

Lelande is nice, minimal and modern HTML5 Personal Template built with Foundation 6 Framework.

Structure

Files Structure

Once downloaded, unzip the compressed folder to see the structure:

html template/
    ├── css/
    │   ├── foundation.css
    │   ├── foundation.min.css
    │   ├── chocolat.css
    │   ├── main.css
    │   ├── materialdesignicons.css
    │   ├── materialdesignicons.min.css
    │   └── slick.css
    ├── fonts/
    │   ├── materialdesignicons-webfont.eot
    │   ├── materialdesignicons-webfont.svg
    │   ├── materialdesignicons-webfont.ttf
    │   ├── materialdesignicons-webfont.woff
    │   └── materialdesignicons-webfont.woff2
    ├── img/
    │   ├── chocolat - controls for chocolat.js lightbox
    │   └── *images - placeholders
    ├── js/
    │   └── vendor/
    │       └── *for detailed list see js section
    │   ├── contact.js
    │   └── main.js
    ├── php/
    │   └── contact-form.php
    ├── 404.html
    ├── about.html
    ├── blog.html
    ├── contact.html
    ├── index.html
    ├── post.html
    ├── project.html
    ├── shortcodes.html
    └── work.html

Html Structure

This theme is a responsive layout based on Foundation 6 Framework. All information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure:

layout

Simple HTML Boilerplate (index.html):

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> ... <title>Lelande</title> ... <!-- FONTS --> ... <!-- CSS --> ... <script src="js/vendor/modernizr.js"></script> </head> <body class="nav-closed"> <!-- Preloader --> <div class="preloader"> <div class="loader"></div> </div> <!-- Right Navigation --> <section class="nav"> <ul class="menu vertical" data-accordion-menu> <li><a href="index.html">Home</a></li> ... </ul> </section> <!-- Nav-cover --> <span class="nav-cover"></span> <!-- Site Wrapper --> <div class="site-wrapper"> <!-- Header --> <header class="header" role="banner"> <!-- Navbar --> <nav class="top-bar top-bar-fixed-top" role="navigation"> <div class="row"> ... </div> </nav> <!-- Heading --> <div class="heading flex flex-middle"> <div class="row column medium-6"> <h1 class="serif">My name is <strong>Léonie Cordier.</strong> ...</h1> </div> </div> </header> <!-- Main --> <main class="main" role="main"> <!-- Section --> <section class="section"> <div class="row"> ... </div> </section> </main> <!-- Footer --> <footer class="footer" role="contentinfo"> <div class="row"> ... </div> </footer> </div><!-- /.site-wrapper --> <!-- Scripts –––––––––––––––––––––––––––––––––––––––––––––––––– --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script> <script src="js/vendor/foundation.min.js"></script> <script src="js/vendor/imagesloaded.pkgd.min.js"></script> <script src="js/vendor/masonry.pkgd.min.js"></script> <script src="js/vendor/slick.min.js"></script> <script src="js/vendor/jquery.chocolat.min.js"></script> <script src="js/main.js"></script> </body> </html>

CSS Structure

All css files are located in css folder:

main.css

This file includes css styles for pages. If you want to change style, colors, margin, padding, font settings etc. of the template you should start from this file.

/* Table of Contents
=================================================== */
/*
  * Default
  * Preloader
  * Typography
  * Components
    * Accordion
    * Badge
    * Buttons
    * Flexbox
    * Forms
    * Menu
    * Pagination
    * Progress bars
    * Tab
    * Table
    * Top Bar
  * Layout
    * Header
    * Main
    * Section
    * Sidebar
    * Social List
    * Offset Wrap
    * Skills
    * Services
    * Masonry
    * Post
    * Widgets
    * Comments
    * Sample Project
    * Contact
    * Footer
  * Print styles
  * Preloader Animation
*/

Example:

    	
    /* Header
    =================================================== */
   .header {
      background: none no-repeat scroll center center #ffffff;
      height: auto;
      position: relative;
      z-index: 12;
   }
   .heading {
      color: rgba(0, 0, 0, 0.67);
      margin: 0;
      padding: 12rem 0 10rem;
      position: relative;
      text-align: center;
      z-index: 1;
   }

foundation.css, foundation.min.css

Foundation 6 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version foundation.min.css for use. For development you can use foundation.css.

JavaScript

All JavaScript files are located in js folder.

Installation

Getting the Template Online

Warning! This is not a Wordpress template. Running, uploading or inserting in Wordpress CMS will have no effect.

This is HTML5 template, you do not need create a database. Just simply upload to the server.

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.

  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.

  3. Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

php Contact Form works only in server environment with installed php.
Load your content on server or use webserver on your machine.

Customization

Layout Settings

Insert your content, write your text, load your photos and images. Compress the size of images and photos. Demo template uses high resolution images, but for normal use it is not appropriate. High-res photos = slow website loading.

You can change HTML structure. Move sections in main content as needed.

Fonts

Google fonts

Free Google fonts: Dosis and Cormorant

Dosis font used for Headings h1,h2, ... h6.

Cormorant is default body font. Used for all tags p, address, ul etc. in template (paragraphs, text, letters...) and for Headings with class .serif

<h1 class="serif">Example Text</h1> <p>Lorem ipsum dolor sit amet, consectetur.</p> <ul> <li>lorem</li> <li>ipsum</li> </ul>

Material Design Icons

Default Icon font for our template is Material Design Icons

Basic structure: <i class="mdi mdi-facebook"></i>

Replace icon name (icon name = css class), example mdi-facebook, with the actual icon name you wish to display, example mdi-home. Then your new icon is <i class="mdi mdi-home"></i>


Important: Google Fonts are used as hosted libraries.

The recommended way to use all Google Font´s is by linking to the web font hosted on Google Fonts.

<link href="https://fonts.googleapis.com/css?family=Cormorant" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

Progress Bars

Set value in HTML code. Open about.html and follow the example below:

Change number value aria-valuenow="number"

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="85" aria-valuemin="0" aria-valuetext="85 percent" aria-valuemax="100"> <div class="progress-meter"></div> <span class="progress-count"></span> </div>

Contact Form

This template contains fully working contact form. Forms used:

  1. Abide Validation: Abide is a form validation library that extends the HTML5 validation API with custom validators. Included in Foundation 6 Framework.

  2. script contact.js (must be included before end body tag in all html files where you need form, example contact.html or another pages with form)

    ... <script src="js/vendor/slick.min.js"></script> <script src="js/vendor/jquery.chocolat.min.js"></script> <script src="js/main.js"></script> <script src="js/contact.js"></script> </body> </html>

  3. php file: contact-form.php.

    <form action="php/contact-form.php" data-abide novalidate> ... </form>

All you need is replace your actual email address.

In order to receive messages you need to edit line 8 of php/contact-form.php file. Just write your own email address:

<?php ... // Enter your email address - edit line 8 $to = "your@mail.com"; < === HERE REPLACE YOUR EMAIL ADDRESS ... ?>

Credits

Plugins, files, extensions and libraries used in template

Framework

Plugins

Fonts

Photos and Images
Not included in download package

Support

Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with JavaScript and jQuery - we will do what we can.

Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!

Your Themekiosk Team

Changelog

Update to v1.1:

updated:

Changes